<template>
	<view>

		<view class="main">
			<view class="iptBox flex-between">
				<input v-model="form.oldMobile" class="ipt" type="text" placeholder="请输入手机号码"
					placeholder-style="color: #b6b6b6;font-size: 32rpx;">
			</view>

			<view class="iptBox flex-between">
				<input v-model="form.captcha" class="ipt" type="text" placeholder="请输入手机验证码"
					placeholder-style="color: #b6b6b6;font-size: 32rpx;">
				<button class="captcha" :plain="true" @click="sendMsg()" :loading="sendVerifyLoad">
					{{sendVerifyLoad?`${downTime}S`:'获取验证码'}}</button>
			</view>

			<view class="iptBox flex-between">
				<input v-model="form.mobile" class="ipt" type="text" placeholder="请输入新的手机号"
					placeholder-style="color: #b6b6b6;font-size: 32rpx;">
			</view>

			<button class="btn" @click="edit">确认修改</button>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					oldMobile: "",
					captcha: "",
					mobile: "",
				},
				time: null,
				downTime: 60,
				sendVerifyLoad: false

			}
		},
		onShow() {
		let user = JSON.parse(uni.getStorageSync('user'))
		this.form.oldMobile = user.account
		},
		methods: {
			sendMsg() {
				if (!this.form.oldMobile) {
					uni.showToast({
						title: '请输入旧手机号',
						icon: "none",
						duration: 1500,
					})
					return
				}
				if (this.sendVerifyLoad) {
					uni.showToast({
						title: `请等待${this.downTime}s后继续操作`,
						icon: "none",
						duration: 1500,
					})
					return
				}
				this.sendVerifyLoad = true
				let time = setInterval(() => {
					this.downTime--;
					if (this.downTime <= 0) {
						this.downTime = 60;
						this.sendVerifyLoad = false;
						clearTimeout(time);
					}
				}, 1000);

				this.$post({
					module: 'User',
					interface: 2000,
					data: {
						account: this.form.oldMobile
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500,
					})
				})
			},

			edit() {
				this.$post({
					module: 'User',
					interface: 2001,
					data: this.form
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500,
					})
					uni.navigateBack()
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.main {
		padding: 0 72rpx;

		.iptBox {
			height: 104rpx;
			background: rgba(191, 191, 191, 0.1);
			border-radius: 52rpx;
			margin-top: 48rpx;
			padding: 0 36rpx;

			.ipt {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 44rpx;
			}

			.captcha {
				padding: 0;
				margin: 0;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
				border: none;
			}
		}

		.btn {
			height: 104rpx;
			background: #F2615F;
			border-radius: 52rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			margin: 340rpx 0 0;
			padding: 0;
		}


	}
</style>
